<template>
  <div class="_wz_cent_main" style="height: 100%;">
    <div class="_wz_deptDisposition">
      <div style="width: 800px;margin: auto;">
        <Form ref="formData" :model="formData" label-position="right" :label-width="120" :rules="deptInfo">
          <Row>
            <i-col span="24">
              <FormItem label="运输企业">
                <Tooltip :content="formData.deptName">
                  <div style="overflow:hidden;white-space: nowrap;text-overflow: ellipsis;cursor: pointer;">{{ formData.deptName }}</div>
                </Tooltip>
              </FormItem>
            </i-col>
            <i-col span="24">
              <FormItem label="企业类型">{{ formData.transportValue }}</FormItem>
            </i-col>

            <i-col span="12">
              <FormItem label="联系人" prop="contact">
                <i-input v-model="formData.contact" placeholder="请填写联系人" clearable />
              </FormItem>
            </i-col>
            <i-col span="12">
              <FormItem label="联系电话" prop="phone">
                <i-input v-model="formData.phone" placeholder="请填写联系电话" clearable />
              </FormItem>
            </i-col>
            <i-col span="12">
              <FormItem label="企业负责人" prop="personCharge">
                <i-input v-model="formData.personCharge" placeholder="请填写企业负责人" clearable />
              </FormItem>
            </i-col>
            <i-col span="12">
              <FormItem label="负责人电话" prop="personChargePhone">
                <i-input v-model="formData.personChargePhone" placeholder="请填写负责人电话" clearable />
              </FormItem>
            </i-col>
            <i-col span="12">
              <FormItem label="法人姓名" prop="legalPerson">
                <i-input v-model="formData.legalPerson" placeholder="请填写法人姓名" clearable />
              </FormItem>
            </i-col>
            <i-col span="12">
              <FormItem label="企业邮箱" prop="email">
                <i-input v-model="formData.email" placeholder="请填写企业邮箱" clearable />
              </FormItem>
            </i-col>

            <i-col span="24">
              <FormItem label="行政区域" class="ivu-form-item-required">
                <Cascader :data="TrainPlaneographicArea" v-model="geographicArea" :load-data="loadData" @on-change="TrainPlaneographicAreaFun"></Cascader>
              </FormItem>
            </i-col>
            <i-col span="12" v-if="thereAreType">
              <FormItem label="营业执照号" prop="uniformSocialCreditCode">
                <i-input v-model="formData.uniformSocialCreditCode" placeholder="请填写营业执照号" clearable disabled />
              </FormItem>
            </i-col>
            <i-col :span="thereAreType?12:24">
              <FormItem label="经营许可证" prop="transportBusinessLicenseCode">
                <i-input v-model="formData.transportBusinessLicenseCode" placeholder="经营许可证" clearable />
              </FormItem>
            </i-col>
            <i-col span="8" v-if="thereAreType">
              <FormItem label="营业执照图片">
                <Upload :before-upload="businessLicense" action="" style="color: #2d8cf0;cursor: pointer;">上传营业执照
                </Upload>
                <div class="demo-upload-list">
                  <viewer style="width: 100%;height: 100%;">
                    <img :src="!!uniformSocialCreditImg.url?uniformSocialCreditImg.url:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                  </viewer>
                </div>
              </FormItem>
            </i-col>
            <i-col :span="thereAreType?8:12">
              <FormItem label="经营许可证图片">
                <Upload :before-upload="businessCertificate" action="" style="color: #2d8cf0;cursor: pointer;">上传经营许可证
                </Upload>
                <div class="demo-upload-list">
                  <viewer style="width: 100%;height: 100%;">
                    <img :src="!!transportBusinessLicenseFile.url?transportBusinessLicenseFile.url:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                  </viewer>
                </div>
              </FormItem>
            </i-col>
            <i-col :span="thereAreType?8:12">
              <FormItem label="企业照片">
                <Upload :before-upload="deptPicFileFun" action="" style="color: #2d8cf0;cursor: pointer;">上传企业照片
                </Upload>
                <div class="demo-upload-list">
                  <viewer style="width: 100%;height: 100%;">
                    <img :src="!!deptPicFile.url?deptPicFile.url:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                  </viewer>
                </div>
              </FormItem>
            </i-col>
          </Row>
          <FormItem label="企业地址" prop="address">
            <i-input v-model="formData.address" placeholder="请填写企业地址" clearable />
          </FormItem>
          <FormItem>
            <Button type="primary" @click="addSubmit('formData')">保存</Button>
          </FormItem>
        </Form>
      </div>

    </div>


    <Spin size="large" fix v-if="spinShow"></Spin>


  </div>
</template>
<script>
export default {
  props: ['selectData'],//接收来自父组件的数据
  data() {
    return {
      thereAreType:true,
      spinShow: false,//本页加载
      uploadProgress: 0,//文件上传进度
      formData: {},

      geographicArea: [],//地理区域选中的数据
      TrainPlaneographicArea: [],//数据list

      uniformSocialCreditImg: {//营业执照图片
        data: null,
        url: '',
      },
      transportBusinessLicenseFile: {//经营许可证
        data: null,
        url: '',
      },
      deptPicFile: {//企业照片
        data: null,
        url: '',
      },
      deptInfo: {
        transportCode: [
          {required: true, message: '请选择企业类型', trigger: 'blur'}
        ],
        // uniformSocialCreditCode: [
        //   //
        //   {required: true, message: '请填写营业执照号', trigger: 'blur'},
        //   {
        //     validator: (rule, value, callBack) => {
        //       if (/^[0-9a-zA-Z]+$/.test(value)) {
        //         callBack()
        //       } else {
        //         callBack('请正确填写营业执照号')
        //       }
        //     }, trigger: 'blur'
        //   }
        // ],
        transportBusinessLicenseCode: [
          {required: true, message: '经营许可证', trigger: 'blur'}
        ],
        contact: [
          {required: true, message: '请填写联系人', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请填写联系电话', trigger: 'blur'},
          {
            validator: (rule, value, callBack) => {
              if (/^[1][0-9]{10}$/.test(value) || /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(value)) {
                callBack()
              } else {
                callBack('请输入手机号 或者 区号-座机号')
              }
            }, trigger: 'blur'
          }
        ],
        // legalPerson: [
        //   {required: true, message: '请填写法人姓名', trigger: 'blur'}
        // ],
        personCharge: [
          {required: true, message: '请填写企业负责人', trigger: 'blur'}
        ],
        personChargePhone: [
          {required: true, message: '请填写企业负责人电话', trigger: 'blur'},
          {
            validator: (rule, value, callBack) => {
              if (/^[1][0-9]{10}$/.test(value) || /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(value)) {
                callBack()
              } else {
                callBack('请输入手机号 或者 区号-座机号')
              }
            }, trigger: 'blur'
          }
        ],
        // email: [
        //   {required: true, message: '请填写企业邮箱', trigger: 'blur'},
        //   {type: 'email', message: '请填写正确的企业邮箱', trigger: 'blur'}
        // ],
      },
    }
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    let that = this;


    that.spinShow = true;

    //地理区域渲染
    that.axios.post(that.apiUrl.systemAreaSystemAreaList, {areaLv: 1}).then(res => {
      if (!!res) {
        let children = [];
        res.data.data.forEach(function (k, i) {
          children.push({value: k.areaCode, label: k.areaName, children: [], loading: false})
        })
        that.TrainPlaneographicArea = children;
      }
    }).catch(err => {
      console.log('失败', err)
    })


    //企业信息
    var data = {};
    data = {uuid:(!!that.selectData && !!that.selectData.deptUuid)?that.selectData.deptUuid:JSON.parse(sessionStorage.getItem('loginData')).user.deptUuid}

    that.axios.post(that.apiUrl.coreDeptCoreDeptInfo, data).then(res => {
      that.spinShow = false;
      if (!!res) {
        that.formData = res.data.data;
        that.geographicArea = [that.formData.provinceCode, that.formData.cityCode, that.formData.countyCode];

        that.transportBusinessLicenseFile.url = !!res.data.data.transportBusinessLicenseImg ? that.apiUrl.imgUrl + res.data.data.transportBusinessLicenseImg + '?t=' + Math.random() : '';//经营许可证
        that.uniformSocialCreditImg.url = !!res.data.data.uniformSocialCreditImg ? that.apiUrl.imgUrl + res.data.data.uniformSocialCreditImg + '?t=' + Math.random() : '';//经营许可证

        that.deptPicFile.url = !!res.data.data.deptPic ? that.apiUrl.imgUrl + res.data.data.deptPic + '?t=' + Math.random() : '';//经营许可证


        //  个体业户    运输经营者 存在 清除数据
        if(that.formData.deptName.indexOf("个体业户") > 0 || that.formData.deptName.indexOf("运输经营者") > 0){
          that.formData.uniformSocialCreditCode = '';
          that.uniformSocialCreditImg.url = '';
          that.thereAreType = false;
        }

      }
    }).catch(err => {
      console.log('失败', err);
    })
  },
  methods: {//执行的方法
    loadData(item, callback) {
      let that = this;
      item.loading = true;
      that.axios.post(that.apiUrl.systemAreaSystemAreaList, {parentCode: item.value}).then(res => {
        if (!!res) {
          let children = [];
          res.data.data.forEach(function (k, i) {
            if (k.areaLv == 3) {
              children.push({value: k.areaCode, label: k.areaName})
            } else {
              children.push({value: k.areaCode, label: k.areaName, children: [], loading: false})
            }
          })
          item.children = children;
          item.loading = false;
          callback();
        }
      }).catch(err => {
        console.log('失败', err);
      })
    },
    TrainPlaneographicAreaFun(data) {//所属区域
//      this.confModi({provinceCode: data[0], cityCode: data[1], countyCode: data[2]})
      this.formData.provinceCode = data[0];
      this.formData.cityCode = data[1];
      this.formData.countyCode = data[2];
      //provinceCode  //省
      //cityCode  //市
      //countyCode //县区
    },
    businessLicense(file) {//营业执照图片
      let that = this;
      let type = file.type.split("/")[0];
      if (type == "image") {//图片
        that.uniformSocialCreditImg.url = window.URL.createObjectURL(file);
        that.uniformSocialCreditImg.data = file;
      } else {
        that.$Message.warning('请选择jpg、png、jpeg的图片进行上传');
      }
      return false;
    },
    businessCertificate(file) {//经营许可证图片
      let that = this;
      let type = file.type.split("/")[0];
      if (type == "image") {//图片
        that.transportBusinessLicenseFile.url = window.URL.createObjectURL(file);
        that.transportBusinessLicenseFile.data = file;
      } else {
        that.$Message.warning('请选择jpg、png、jpeg的图片进行上传');
      }
      return false;
    },
    deptPicFileFun(file) {//企业照片
      let that = this;
      let type = file.type.split("/")[0];
      if (type == "image") {//图片
        that.deptPicFile.url = window.URL.createObjectURL(file);
        that.deptPicFile.data = file;
      } else {
        that.$Message.warning('请选择jpg、png、jpeg的图片进行上传');
      }
      return false;
    },
    addSubmit(formName) {//新增修改提交
      let that = this;
      that.$refs[formName].validate((valid) => {
        if (valid) {//正则判断使用

          //所属区域
          if (!!!that.formData.provinceCode) {
            that.$Message.warning('请选择所属区域');
            return false;
          }


          let data = that.formData;
          let formData = new FormData();

          //删除JSON字段


          for (let key in data) {
            if (!!data[key]) {
              formData.append(key, data[key]);
            }
          }

          //营业执照图片
          if (!!that.uniformSocialCreditImg.data) {//选择了图片
            formData.append('uniformSocialCreditFile', that.uniformSocialCreditImg.data);
          }

          //经营许可证图片
          if (!!that.transportBusinessLicenseFile.data) {//选择了图片
            formData.append('transportBusinessLicenseFile', that.transportBusinessLicenseFile.data);
          }

          //企业照片
          if (!!that.deptPicFile.data) {//选择了图片
            formData.append('deptPicFile', that.deptPicFile.data);
          }



          that.axios.post(that.apiUrl.coreDeptCoreDeptSaveOrUpdate, formData, that.public.parameterUploadProgress(that)).then(res => {
            that.$Spin.hide();
            if (!!res) {
              that.$Message.success('保存成功');
              that.$emit("closeFun", true)
            }
          }).catch(err => {
            console.log('失败', err);
          })
        } else {
          that.$Message.error('请正确填写表单');
        }
      })

    },
  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_deptDisposition {
  padding: 30px 0 0 0;
  width: 100%;
  height: 100%;
  background: #fff;
  overflow: auto;

  .demo-upload-list {
    display: inline-block;
    width: 120px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    border: 1px solid rgba(0, 0, 0, .2);
    margin-right: 4px;

    img {
      width: 100%;
      height: 100%;
    }

    .demo-upload-list-cover {
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, .6);

      i {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
      }
    }
  }

  .demo-upload-list:hover .demo-upload-list-cover {
    display: block;
  }
}


</style>


